<template>
  <div class="attentionlist">
    <van-nav-bar
      fixed
      title="我的关注"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="pduan">共关注了{{ datalist.length }}个用户</div>
    <div v-if="issuelist.length == 0">
      <van-empty description="描述文字" />
    </div>
    <div class="issue" v-if="issuelist.length != 0">
      <div class="yonghulist" v-for="(item, index) in datalist" :key="index">
        <div class="yonghutou">
          <img class="auto_img" :src="item.avatar_medium" alt="" />
        </div>
        <div class="yonghuxx">
          <h2>{{ item.nick }}</h2>
          <p>{{ item.age }}</p>
        </div>
        <div class="lv">
          <span
            >Lv.<i>{{ item.lvl }}</i></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "attentionlist",
  data() {
    return {
      issuelist: [],
      datalist: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
      //   Toast("返回");
    },

    getcollect() {
      let getcollectdata = JSON.parse(localStorage.getItem("attentionlist"));
      if (!getcollectdata) {
        this.issuelist = [];
      } else {
        getcollectdata.forEach((element) => {
          this.issuelist.push(element);
        });
        console.log();
        // 获取关注的数据额列表
        this.issuelist.forEach((ele, index) => {
          this.axios({
            method: "get",
            url: `/user/info/${ele}`,
          })
            .then((result) => {
              this.datalist.push(result.data.result.user);
            })
            .catch((err) => {
              console.log(err);
            });
        });
        // console.log(this.datalist);
      }
    },
  },
  created() {
    this.getcollect();
  },
};
</script>

<style lang="less" scoped>
.attentionlist {
  width: 100%;
  height: 100%;
  .pduan {
    margin-top: 50px;
  }
  .yonghulist {
    position: relative;
    width: 90%;
    height: 70px;
    margin: 0 5%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: 10px;
    background-color: #f7f0dd;
    .yonghutou {
      float: left;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid black;
    }
    .yonghuxx {
      float: left;
      margin-left: 50px;
    }
    .lv {
      width: 40px;
      height: 25px;
      margin-top: 15px;
      float: left;
      span {
        font-size: 0.4rem;
        color: #feca2d;
      }
    }
  }
}
.auto_img {
  width: 100%;
  display: block;
}
</style>